

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>课程学习</title>
    <link href="css/css.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="Class/app/css/dest/styles.css?=2016121272249">
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.4.3/css/layui.css">
    <script src="https://cdn.staticfile.org/layui/2.4.3/layui.js"></script>
    <link href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <style>
        .The_Class li{
            float: left;
            width: 300px;
            height: auto;
            overflow: hidden;
            border: 1px #edecec solid;
            margin-right: 14px;
            margin-bottom: 8px;
        }
        .The_Class ul{
            width: auto;
        }
        .massage{
            display: none;
            padding: 20px;
            position: fixed;
            top: 40%;left: 40%;
            border-radius: 5px;
            background: rgba(0,0,0,0.5);
            z-index: 5000;
            color: #FFF;
        }
        #toTop{
            width: 50px;
            height: 65px;
            border: 1px solid black;
            background-color: #f3f6f6;
            opacity: 0.5;
            text-align: center;
            position: fixed;
            right: 80px;
            bottom: 0px;
        }
    </style>

</head>

<body>
<header class="navbar-fixed-top headerbg">
    <div class="container-fluid">
        <div class="navBox hidden-xs hidden-sm">
            <header class="navbar-fixed-top headerbg">
                <div class="container-fluid">
                    <div class="logo">
                        <h3 style="line-height: 30px;font-size: 24.5px;font-family: inherit;font-weight: bold;line-height: 20px;color: inherit;text-rendering: optimizelegibility;"><a href="#"><span style="font-size: 30px;">朋心合力</span></a></h3>
                    </div>
                    <div class="navBox hidden-xs hidden-sm">
                        <ul class="navList list-unstyled">
                            <li class="navLi ">
                                <h3><a href="index.html"><span>首页</span></a></h3>
                            </li>
                            <li class="navLi">
                                <h3><a href="publish.html"><span>项目发布</span></a></h3>
                            </li>
                            <li class="navLi on">
                                <h3><a href="#"><span>课程学习</span></a></h3>
                            </li>
                            <li class="navLi">
                                <h3><a href="#"><span>项目广场</span></a></h3>
                                <div class="navSub">
                                    <ul class="navSubList list-unstyled">
                                        <li class="navSubLi">
                                            <h4><a href="Looking.html">● 寻找合伙人</a></h4>
                                        </li>
                                        <li class="navSubLi">
                                            <h4><a href="Looking2.html">● 寻找项目</a></h4>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="navLi">
                                <h3><a href="My_Ziliao.html"><span>我的项目</span></a></h3>
                            </li>
                        </ul >
                    </div>
                </div>
            </header>
        </div>
    </div>
</header>
<div class="bannerN animated" style="background-image: url(Lookingimg/gs_bg_02.png);">
    <div class="imgFull"><img src="Lookingimg/gs_bg_02.png" class="img-responsive"></div>
    <h2 class="banH2 wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">课程学习</h2>
    <div class="sky">
        <div class="clouds_one"></div>
        <div class="clouds_two"></div>
        <div class="clouds_three"></div>
    </div>
</div>
<div class="col-md-9 layout-body">

    <div class="content">
        <div class="row course-cates" id="cates1">
            <div class="col-md-1 course-cates-title" >类别：</div>
            <div class="col-md-11 course-cates-content">
                <a class="active" data-value="全部">全部</a>
                <a class="" data-value="免费">免费</a>
                <a class="" data-value="限免">限免</a>
                <a class="" data-value="会员">会员</a>
            </div>
            <span id="massage1" class="massage" style="border:1px crimson ;"></span>
        </div>
        <div class="row course-cates" id="cates2">
            <div class="col-md-1 course-cates-title">标签：</div>
            <div class="col-md-11 course-cates-content">
                <a class="active" data-value="全部">全部</a>
                <a class=""  data-value="Python">Python</a>

                <a class="" data-value="C/C++" >C/C++</a>

                <a class="" data-value="Linux">Linux</a>

                <a class="" data-value="Web">Web</a>

                <a class="" data-value="信息安全">信息安全</a>

                <a class="" data-value="PHP">PHP</a>

                <a class="" data-value="Java">Java</a>

                <a class="" data-value="NodeJS">NodeJS</a>

                <a class="" data-value="Android">Android</a>

                <a class="" data-value="GO">GO</a>

                <a class="" data-value="Spark">Spark</a>

                <a class="" data-value="计算机专业">计算机专业课</a>

                <a class="" data-value="Hadoop">Hadoop</a>

                <a class="" data-value="HTML5">HTML5</a>

                <a class="" data-value="Scala">Scala</a>

                <a class="" data-value="Ruby">Ruby</a>

                <a class="" data-value="R">R</a>

                <a class="" data-value="网络">网络</a>

                <a class="" data-value="Git">Git</a>

                <a class="" data-value="SQL" >SQL</a>

                <a class="" data-value="NoSQL" >NoSQL</a>

                <a class="" data-value="算法">算法</a>

                <a class="" data-value="Docker">Docker</a>

                <a class="" data-value="Swift" >Swift</a>

                <a class="" data-value="汇编" >汇编</a>

                <a class="" data-value="Windows" >Windows</a>
            </div>
            <span id="massage2" class="massage" style="border:1px crimson ;"></span>
        </div>
        <div class="row course-cates chose">
            <div class="col-md-1 course-cates-title" >已选类型：</div>
            <div class="col-md-11 course-cates-content" id="case1">
            </div>
            <div class="col-md-1 course-cates-title" >已选标签：</div>
            <div class="col-md-11 course-cates-content" id="case2">
            </div>
            <div class=" course-cates">
                <input type="button" value="搜索" />
            </div>
        </div>

    </div>
    <div class="content position-relative">
        <div class="The_Class">
            <ul id="123">
                <li>
                    <div class="col-md-4 col-sm-6  course">
                        <a class="course-box" href="//www.bilibili.com/video/BV1WE411d7Dv?from=search&seid=5272217397727303817">
                            <div class="course-img">
                                <img alt src="Class/webp.webp">
                            </div>
                            <div class="course-body">
                                <span class="course-title" data-toggle="tooltip" data-placement="bottom" title="Spring5">Spring</span>
                            </div>
                            <div class="course-footer">
									<span class="course-per-num pull-left">
										<div class="column">
									<i class="play icon"></i>
											57973</div>
									</span>
                            </div>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
        <div class="search-result"></div>
    </div>
    <div id="Thepage" align="center"></div>
</div>
<!-- 分页-->

<script>
    var coursecates1='';
    var coursecates2='';
    layui.use(['laypage', 'layer'], function() {
        var laypage = layui.laypage,
            layer = layui.layer,
            $ = layui.jquery;

        //标签选项
        $(function (){
            //类别
            $("#cates1").children("div").children("a").click(function (){
                //选中的标签
                console.log("1");
                if (coursecates1) {
                    $('#massage1').html("最多只能选择一个类别标签噢").show().delay(1000).fadeOut();
                    return;
                } else{
                    console.log("3");
                    $(this).attr("class"," ative");
                    var  value = $(this).html();
                    coursecates1=value;
                    var domItem =`<a onclick=deletes('${value}')
												rel = '${value}'
											>
											x <span>${value}</span>
											</a>`;
                    $(".chose").children("#case1").append(domItem);
                }
            });
            //标签
            $("#cates2").children("div").children("a").click(function (){
                //选中的标签
                console.log("2");
                if (coursecates2) {
                    $('#massage2').html("最多只能选择一个技能标签噢").show().delay(1000).fadeOut();
                    return;
                } else{
                    $(this).attr("class"," ative");
                    var  value = $(this).html();
                    coursecates2=value;
                    var domItem =`<a onclick=deletes('${value}')
												rel = '${value}'
											>
											x <span>${value}</span>
											</a>`;
                    $(".chose").children("#case2").append(domItem);
                }
            });
        });

        // console.log(laypage);

        $.get({
            url: 'http://rap2api.taobao.org/app/mock/292073/financing/All',
            success: function(res) {
                // console.log(res);
                //调用分页
                laypage.render({
                    elem: 'Thepage',
                    count: res.total,
                    layout: ['prev', 'page', 'next', 'refresh', 'skip'],
                    jump: function(obj) {
                        //obj里面有我们分页参数，比如当前页page，每页显示条数limit，可以把下面代码注释掉查看,我们传参可以不传limit，我后台写死，每页显示12条
                        // console.log(obj);
                        $.get({
                            url: 'http://rap2api.taobao.org/app/mock/292073/financing/All', //请求路径
                            data: {
                                page: obj.curr,
                                limit: obj.limit,
                                coursecates1:coursecates1,
                                coursecates2:coursecates2,
                            }, //这个参数为我们动态切换的
                            success: function(res) { //成功后的回调函数
                                console.log(res);
                                document.getElementById('123').innerHTML =
                                    function() {
                                        var arr = [],
                                            thisData = res.result //结果赋值
                                        layui.each(thisData, function(index,
                                                                      item
                                        ) { //遍历结果 ,下面两个console自己看看
                                            // console.log(index);
                                            // console.log(item);
                                            arr.push("<li>"+
                                                "	<div class=\"col-md-4 col-sm-6  course\">"+
                                                "		<a class=\"course-box\" href="+ item.url +">"+
                                                "			<div class=\"course-img\"><img alt src="+ item.image +"></div>"+
                                                "			<div class=\"course-body\">"+
                                                "				<span class=\"course-title\" data-toggle=\"tooltip\" data-placement=\"bottom\" title="+ item.title +">"+ item.title +"</span>"+
                                                "			</div>"+
                                                "			<div class=\"course-footer\">"+
                                                "				<span class=\"course-per-num pull-left\">"+
                                                "					<div class=\"column\"><i class=\"play icon\"></i>"+
                                                "						57973</div></span></div></a></div>"+
                                                "</li>");
                                        });
                                        return arr.join('');
                                    }();
                            }
                        })
                    }
                });
            }
        });


    })
    //删除标签
    function deletes(value){
        var laypage = layui.laypage,
            layer = layui.layer,
            $ = layui.jquery;
        $(".course-cates-content").find("a[rel = '"+value+"']").remove();
        (coursecates1==value)?(coursecates1=''):(coursecates2='');
    }
    //筛选选中的标签

</script>
<footer class="footerBg" style="height: 276px">
    <div class="container">
        <div class="ptb40">
            <div class="footTopL" style="position: relative">
                <dl class="clearfix" style="position:absolute;width: 400px; left: -78px; ">
                    <dt>关于我们</dt>
                    <dd><a href="#">联系地址</a></dd>
                    <dd><a href="#">荣誉资质</a></dd>
                    <dd><a href="#">加入我们</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px;position:absolute;left: 195px; ">
                    <dt>系统团队</dt>
                    <dd><a href="#">林某</a></dd>
                    <dd><a href="#">李某</a></dd>
                    <dd><a href="#">蔡某</a></dd>
                    <dd><a href="#">周某</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px;position:absolute;left: 456px; ">
                    <dt>培训中心</dt>
                    <dd><a href="#">java类培训</a></dd>
                    <dd><a href="#">c/c++类培训</a></dd>
                    <dd><a href="#">Python类培训</a></dd>
                    <dd><a href="#">go语言类培训</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px;position:absolute;left: 753px;">
                    <dt>权限介绍</dt>
                    <dd><a href="#">队长权限</a></dd>
                    <dd><a href="#">队员权限</a></dd>
                    <dd><a href="#">惩罚机制</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="CopyRight" style="position: relative;margin-top: 100px;margin-left: -300px">
        <div class="container"><span class="footer_logo" style="font-size: 45px;margin-top: 35px;margin-left: 70px">LOGO</span><span
                class="CopyRight_name" style="position:absolute;right: 200px">朋心合力平台版权所有</span></div>
    </div>
</footer>
<div id="toTop">
    <i class="arrow up icon">
    </i>
    <p style="margin-top: 10px">&nbsp;返回顶部</p>
</div>
<script type="text/javascript">
    window.onload=function () {
        var oToTop=document.getElementById("toTop");
        oToTop.onclick=function () {
            document.documentElement.scrollTop="0px";
            document.body.scrollTop="0px";
        }
    }
</script>

</body>
</html>